<template>
  <view class="container">
    <view class="title"> 请提前充流量卡年费-(到期后无法充值) </view>
    <view class="common_cell">
      <u-cell title="流量卡到期时间：2024-12-25"> </u-cell>
    </view>
    <view class="common_cell">
      <u-cell title="充值金额（一年）：15"> </u-cell>
    </view>
    <paymentPopup ref="paymentPopupRef" />

    <!-- 确认充值 -->
    <view
      class="confirm_recharge"
      @click="this.$refs.paymentPopupRef.show = true"
    >
      <view class="confirm_recharge_text">确认充值</view>
    </view>
  </view>
</template>
  
  <script>
import paymentPopup from "@/components/payment-popup/index.vue";
export default {
  components: {
    paymentPopup,
  },
  data() {
    return {
      // 页面参数
      options: {},
    };
  },

  // 如果点击了更多金额，才显示200以上的,使用计算属性完成
  computed: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {},
};
</script>
  
  <style lang="scss" scoped>
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 25.568rpx 25.568rpx 0 25.568rpx;

  .title {
    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 290;
    line-height: 40.807rpx;
    text-align: left;
    color: rgba(30, 31, 35, 1);
  }
}
.confirm_recharge {
  height: 83.523rpx;
  border-radius: 42.614rpx;
  background: #60a4f7;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 85.227rpx;
  width: 80%;
  left: 10%;
  .confirm_recharge_text {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 34.006rpx;
    text-align: left;
    color: #ffffff;
  }
}
</style>
  